[3選]最近気になるjavascriptフレームワーク

最近見かけて気になったJsフレームワーク

最近は新しいフレームワーク/ライブラリが次から次へとでてきて、名前を覚えるだけでも一苦労です。 参考(少々古いですが):JavaScriptのMVCフレームワークと仲間たち

その中でも、いくつか気になるjsフレームワークがあったのでそれらについて紹介します。

AngularJS 1.x系

これは気になったというか、実際によく使用しているフレームワークです。 いまJavaScriptのフレームワークといえば、一番最初に名前が挙がると思われます。

AngularJSはGoogleとコミュニティが開発しているオープンソースのJavaScript用MVWフレームワークで、 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 Webアプリのフロント部分を効率よく記述するための機能を持っています。

AngularJs1.x 公式サイト:https://angularjs.org

1.x系は弊社でもいろいろなプロジェクトで使用しています。 AngularJS 1系の詳細はこのへんをご確認ください。

AngularJS 2.0

2015年の米AngularJSカンファレンス発表された、AngularJSの次期バージョンです。 1.xと比較して、もはや別物じゃないかといえるくらいの大きな変更が加えられています。

主な変更点

• ECMAScript6(ES6)の採用
• 双方向バインディングの廃止
• ng-xxx記法を廃止して、記号([]、()、#)による式やイベント記述
• JavaScriptベースでアノテーション等を追加したAtScriptを利用
• WebComopmentsを利用し、コンポーネント化を進める

具体的にはControllerやService、$scopeがなくなるとか、 ディレクティブ定義がただのclassになるなどの変更があります。 2.0の公式サイトがすでにあるので、気になるかたは実際にためしてみましょう、

AngularJs2.0 公式サイト:https://angular.io/

Aurelia

Aurelia（アウレリア）は2015年1月にリリースされたばかりのフレームワークで、 元々はAngularJSの開発に携わっていたRob Eisenberg 氏が Durandal 2.xの後継として作成したフレームワークのようです。 フルスタックフレームワークであり、下記のような機能をもっています。

• ES6/ES7機能取り込み
• DI（依存性注入)
• 双方向バインディング
• HTML拡張
• ルーティング機能
• モジュール化

AureliaはECMAScript 6の機能が使用されていて、パッケージマネージャはjspm(bower+gulpっぽいツール)を使っています。 他にもWebComponents、Object.observeなど、新しい技術の機能を取り込んでいます。

Aurelia JS公式:http://aurelia.io/

React

React.jsはFacebook製のJavaScriptライブラリで、UIを構築するためのコンパクトなライブラリです。 AngularやAureliaと違い、フレームワークでなくUIを構築するだけのライブラリなので、MVWでいえばV(ビュー)の機能のみを担当します。 主な特徴は下記の通りです。

1.JUST THE UI React.jsはビューのみを担当する。そのため、Angularなど、他のフレームワークと合わせて使用することも可能。 React.jsはComponentを作るためのライブラリで、使用するために覚えなければならない事も多くない。

2.VIRTUAL DOM React.jsは「仮想的なDOMの構造体をJavaScriptのオブジェクトで持つ」という仕組みを持っており、 最小限の変更で実際のDOMへ反映させるので、パフォーマンスがよいみたいです。

3.DATA FLOW Angularでは双方向ですが、こちらは一方向のデータバインディングです。 データ管理用コンポーネントに対してデータを渡すことで、シンプルに実装できるらしいです。 （実際つかってみないとイメージわきません。。）

あとReactの特徴としてはJSX(XMLみたいなシンタックスの記述)を使用できるということがあります。 JSXを使うと、次のようなコードは

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

こんなふうにかけます。

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

Javascriptのコード中にhtmlをそのまま埋め込んでいるみたいですね。 なお、JSXは必須ではないです。

React公式:http://facebook.github.io/react/

まとめ

さて、今回は私が気になっているJavaScriptのフレームワークを３つ紹介しました。 個人的には、ReactとAureliaがおもしろそうなので、さわってみたいと思っています。